<template>
  <div>
    <div class="box-border p-12px">
      <div>
        <SubTitle title="表中字段分级情况" />
        <AsyncTable v-bind="tableInfo" ref="tableRef" :fetchData="fetchData" />
      </div>
    </div>
    <div>
      <el-button @click="closeOutDrawer">关闭</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import SubTitle from '@/components/SubTitle/index.vue'
import { getDataBaseList } from '@/api/assetList'
import { renderSamples, renderClassification, renderLevel } from '@/utils/commonRender'
const { proxy } = getCurrentInstance() as any
import dayjs from 'dayjs'
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})

const tableInfo = reactive({
  columns: [
    {
      label: '字段名称',
      prop: 'column'
    },
    {
      label: '抽样数据',
      render: renderSamples,
      width: '200px',
      isShowOverflowTooltip: 'false'
    },
    {
      label: '分类',
      render: renderClassification
    },
    {
      label: '分级',
      render: renderLevel
    }
  ],
  data: []
})

const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await getDataBaseList({
    page,
    pageSize,
    parentId: props.params.id
  })
  return { data, count }
}

console.log('props.params', props.params)
</script>

<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
.sample-item {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}
</style>
